<template>
  <div class="app">
    <AppHeader></AppHeader>
    <!-- nav-bar -->
    <nav class="nav-bar">
      <div class="nav-bar-wrapper container">
        <AppLogo></AppLogo>
      </div>
    </nav>
    <!-- main -->
    <section class="m-t vh container ctx">
      <div class="ctx-left">
        <div class="sidebar-share">
          <ul class="share-list">
            <li class="share-item">
              <Icon type="social-twitter-outline" size="22"></Icon>
            </li>
            <li class="share-item">
              <Icon type="social-googleplus" size="22"></Icon>
            </li>
            <li class="share-item">
              <Icon type="social-github" size="22"></Icon>
            </li>
          </ul>
        </div>
      </div>
      <div class="ctx-main">
        <!-- article info -->
        <div class="article m-b-l">
          <h1 class="article-title">{{articleInfo.title}}</h1>
          <section class="article-meta">{{`${articleInfo.source} | ${articleInfo.create_time}`}}</section>
          <section class="article-abstract">{{articleInfo.abstract}}</section>
          <section class="article-content" v-html="content"></section>
          <section class="article-tags">{{articleInfo.tags}}</section>
        </div>
        <!-- comment -->
        <div class="comment m-b-l">
          <div class="comment-title">
            <template v-if="total > 0"><a>{{total}}</a>条评论</template>
            <template v-else><span>暂无评论</span></template>
          </div>
          <!-- comment input -->
          <div class="comment-input">
            <Input v-model="commentCtx" class="comment-input__ipt" size="large">
              <Button class="comment-input__btn" slot="append" :loading="loading" @click="handleCommentBtnClick">评论</Button>
            </Input>
          </div>
          <!-- comment list -->
          <ul class="comment-list">
            <li class="comment-item" v-for="item in commentList" :key="item.id">
              <div class="comment-item-thumb">
                <img :src="'https://wx.qlogo.cn/mmopen/Q3auHgzwzM7iaPRQcicHvOcDLhN6vy5CibrkMkg4OsfF36zObGCRAqn7bU0WrnRmkh2k489SW17ibIVpTK0Yq6icGqKH4ib6Y6tYSu1q8tpaT4NWY/64'" alt="head">
              </div>
              <div class="comment-item-content">
                <div class="comment-item-header">
                  <a class="user-info">化学科技生活</a>
                  <span class="time">{{item.create_time}}</span>
                </div>
                <p class="comment-item-body">{{item.content}}</p>
                <div class="comment-item-footer">
                  <a class="reply">回复</a>
                  <div class="zan">
                    <Icon type="ios-heart" size="14"></Icon>
                    <span>180</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- push list -->
        <div class="push-list m-b-l">
          <h3 class="push-list__title">
            <Icon class="icon" type="navicon" size="18"></Icon>相关推荐
          </h3>
          <div class="push-list__body">
            <media-list>
              <media-item v-for="(item, index) in articleList" :key="item.id" v-if="index < 5" :data="item"/>
            </media-list>
          </div>
        </div>
      </div>
      <div class="ctx-aside">
        <!-- hot -->
        <Card class="aside-card">
          <h3 slot="title" class="aside-card__title">
            <Icon class="icon" type="navicon" size="16"></Icon>热点推送
          </h3>
          <media-list>
            <media-item class="media-item--small" v-for="(item, index) in articleList" :key="item.id" v-if="index < 5" :data="item"/>
          </media-list>
        </Card>
      </div>
    </section>
  </div>
</template>

<script>
import AppHeader from '~/components/AppHeader'
import AppLogo from '~/components/AppLogo'
import { MediaList, MediaItem } from '~/components/MediaList'
import article from '~/api/article'
import comment from '~/api/comment'

export default {
  name: 'App',
  components: {
    AppHeader,
    AppLogo,
    MediaList,
    MediaItem
  },
  computed: {
    content () {
      const { content } = this.articleInfo;
      return this.xssfilter(content)
      // return content;
    }
  },
  async asyncData ({ params }) {
    let articleData = await article.query({})
    let info = await article.info({ id: params.id })
    return {
      id: params.id,
      articleInfo: info,
      articleList: articleData.list
    }
  },
  data () {
    return {
      commentCtx: '',
      commentList: [],
      total: 0,
      loading: false
    }
  },
  mounted () {
    this.loadArticleComment()
  },
  methods: {
    async loadArticleComment() {
      let { list, pagination } = await comment.query({topicId: this.id})
      this.commentList = list
      this.total = pagination.total
    },
    async handleCommentBtnClick() {
      const topicId = Number(this.id)
      const topicType = 0
      const content = this.commentCtx
      try {
        this.loading = true
        let data = await comment.add({topicId, topicType, content})
        this.loading = false
        this.commentCtx = ''
        this.loadArticleComment()
      } catch (error) {
        console.log(error)
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
  .nav-bar {
    height: 56px;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.12);
    z-index: 101;
    .nav-bar-wrapper {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      height: inherit;
    }
  }

  .ctx {
    .ctx-left {
      position: fixed;
      display: inline-block;
      width: 140px;
      top: 108px;
      left: calc((100% - 1180px) / 2);
    }

    .ctx-main {
      float: left;
      width: 720px;
      margin: 0 20px 0 140px;
      position: relative;
    }

    .ctx-aside {
      float: right;
      width: 300px;
    }
  }

  .article {
    .article-title {
      font-size: 28px;
      line-height: 1.5;
      color: #222;
      margin-bottom: 16px;
    }
    .article-meta {
      font-size: 14px;
      color: #666666;
      margin-bottom: 16px;
    }
    .article-abstract {
      font-size: 16px;
      line-height: 2;
      color: #333333;
      margin-bottom: 16px;
    }
    .article-content {
      font-size: 16px;
      line-height: 2;
      color: #333333;
      margin-bottom: 16px;
    }
    .article-tags {
      font-size: 14px;
      color: #666666;
    }
  }

  .push-list {
    .push-list__title {
      font-size: 18px;
      .icon {
        margin-right: 16px;
      }
    }
  }

  .sidebar-share {
    width: 48px;
    margin: 16px auto 0;
    .share-list {
      list-style: none;
      .share-item {
        width: 42px;
        height: 42px;
        text-align: center;
        font-size: 14px;
        line-height: 42px;
        color: #666666;

        &:hover {
          background-color: #7bb32e;
          color: #333333;
        }
      }
    }
  }

  .comment {
    .comment-title {
      font-size: 18px;
      line-height: 2;
    }
    .comment-input {
      margin: 16px 0;
      .comment-input__ipt {
        input {
          height: 45px;
          border-color: #3f404c;
          border-radius: 0;

          &:focus {
            border-color: #3f404c;
            outline: 0;
            box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
          }
        }
        input + div {
          border-radius: 0;
          background: #3f404c;
          border-color: #3f404c;
        }
        
      }
      .comment-input__btn {
        width: 100px;
        color: #ffffff;
      }
    }
  }

  .comment-list {
    .comment-item {
      display: flex;
      flex-flow: row;
      align-items: flex-start;
      position: relative;
      padding: 16px 0;

      &:after {
        content: '';
        position: absolute;
        height: 1px;
        background: #e8e8e8;
        left: 52px;
        right: 0;
        bottom: 0;
      }
      &:last-child {
        &:after {
          display: none;
        }
      }

      .comment-item-thumb {
        width: 36px;
        height: 36px;
        border-radius: 100%;
        margin-right: 16px;
        overflow: hidden;
      }

      .comment-item-content {
        position: relative;
        flex: 1;
        .comment-item-header {
          font-size: 14px;

          .user-info {
            margin-right: 16px;
          }
          .time{
            color: #999999;
          }
        }
        .comment-item-body {
          margin: 10px 0;
          font-size: 14px;
          line-height: 1.5;
        }
        .comment-item-footer {
          display: flex;
          flex-flow: row;
          align-items: center;
          justify-content: space-between;

          .reply {
            font-size: 14px;
          }
          .zan {
            color: #999999;
          }
        }
      }
    }
  }
</style>